<template>
  <q-page class="row no-wrap">
    <page-left-menu
      :title="$t('contents.title')"
      class="page-menu"
      color="#9B59B6"
      :menus="menus"
      @onChange="onMenuChange"
    />
    <q-scroll-area class="page-scroll q-pa-md">
      <router-view v-if="currentUser" />
      <guest-view v-else />
    </q-scroll-area>
  </q-page>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import PageLeftMenu from 'layouts/components/PageLeftMenu.vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import GuestView from 'pages/guests/MyContent.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const themeColor = '#9B59B6';
const userStore = useUserStore();
const globalStore = useGlobalStore();
globalStore.setRightDrawerColor(themeColor);
const currentUser = computed(() => userStore.currentUser);
const router = useRouter();
const menus = ref<PageLeftItem[]>([
  { label: 'contents.myVideos', routeName: 'MyVideos' },
  { label: 'contents.myAudios', routeName: 'MyAudios' },
  { label: 'contents.myPlaylists', routeName: 'MyPlaylists' },
]);
async function onMenuChange(info: PageLeftItem) {
  await router.replace({ name: info.routeName });
}
</script>
